<template>
  <el-card class="box-card" :body-style="{ padding: 0 }" :class="{ 'box-opened': isopen }">
    <div slot="header" class="card-header">
      <div class="card-title">
        <slot name="header" />
      </div>
      <div class="toolbtn">
        <slot name="header-toolbtn" />
        <el-button type="primary" size="mini" @click="changeCardOpen" :icon="isopen ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"> </el-button>
      </div>
    </div>
    <div class="card-body" v-show="isopen">
      <slot />
    </div>
  </el-card>
</template>
<script>
export default {
  name: "AeroCardView",
  props: {
    cardOpen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isopen: false,
    };
  },
  created() {
    this.isopen = this.cardOpen;
  },
  methods: {
    changeCardOpen() {
      this.isopen = !this.isopen;
    },
  },
};
</script>
<style lang="scss" scoped>
.box-card {
  ::v-deep {
    .el-card__header {
      border-bottom: 0;
    }
  }
}

.card-header {
  display: flex;

  .card-title {
    flex: 1;
  }

  .toolbtn {
    display: flex;

    ::v-deep {
      .el-button {
        margin-left: 15px;
      }
    }
  }
}

.card-body {
  padding: 20px;
}
</style>
